<template>
	<page-meta :page-style="'overflow:'+(popShow?'hidden':'visible')"></page-meta>
	<headassy title="编码列表" searchTitle="防伪编码/仓储编码/产品名称" @changeTab="changeTab" :tabs="tabs" :tabIndex="tabIndex" @goSearch="goSearch" @openSideBar="getAllSearch"></headassy>
	<view class="code-content">
		<view class="nav-status text-orange">
			当前状态有{{count}}个编码
		</view>

		<scroll-view>
			<view class="card-list">
				<view class="card mt-5" v-for="(item,index) in codelist" :key="item.id">
					<view class="u-flex-between">
						<view class="coding" @click="handleCopy(index)">
							<view class="text-info ">
								{{item.securityCode}}
							</view>
							<view>
								{{item.wareCode}}
							</view>
						</view>
						<view class="mr-5" @click="handleCopy(index)" style="padding: 10rpx;">
							<u-icon name="file-text" color="#268af0" size="38"></u-icon>
						</view>
					</view>
					<view class="center">
						<view class="title u-flex-between">
							<view class="title-left text-gray">
								产品名称:
								<span style="margin-left: 14rpx;">{{item.model}}</span>
							</view>
						</view>
						<view class="text">
							创建时间:
							<span style="margin-left: 14rpx;">{{item.createTime }}</span>
						</view>
						<view class="text">
							更新时间:
							<span style="margin-left: 14rpx;">{{item.updateTime }}</span>
						</view>
					</view>
					<view class="tag u-flex-content-end">
						<view class="cus-blue-tag mr-5">
							{{item.type}}
						</view>
						<view class="cus-blue-tag mr-5">
							{{item.codeStatus}}
						</view>
					</view>
				</view>
				<view class="example-body">
					<uni-load-more :status="status" :content-text="contentText"/>
				</view>
			</view>
		</scroll-view>
		
		<!-- 侧边栏 -->
		<sidebarpop
			ref="page-sidebar"
			ptitle="筛选"
			:sidebarList="JSON.stringify(sidebarList)"
			@closeclick="closePop"
			@radioClick="radioClick"
			@clearSelect="clearSelect"
			@saveclick="saveSelect"
		>
		</sidebarpop>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0,
				tabs: [{
						name: '待激活',
						disabled: false,
						param: {
							status: '待激活'
						}
					},
					{
						name: '已激活',
						disabled: false,
						param: {
							status: '已激活'
						}
					},
					{
						name: '质保中',
						disabled: false,
						param: {
							status: '质保中'
						}
					},
					{
						name: '已过保',
						disabled: false,
						param: {
							status: '已过保'
						}
					},
					{
						name: '全部编码',
						disabled: false,
						param: {
							status: ''
						}
					},
				],
				page: {
					num: 1,
					size: 20,
					isdelete: "0"
				},
				codelist: [],
				acId: '',
				custAccId: '',
				keyword: '',
				count: '',
				show: false,
				typeList: [],
				typeList2: [],
				codeType: [],
				data: {
					status: '',
					type: '',
					isDisable: 0,
					sort: ''
				},
				
				sidebarList: [],			// 侧边栏数据
				popShow: false,				// 弹窗触发时为true
				system: uni.getSystemInfoSync(),
				status: 'loading',		//上拉加载
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
			};
		},
		onLoad(options) {
			if (options.typeName) {
				for (var i = 0; i < this.tabs.length; i++) {
					if (this.tabs[i].name === options.typeName) {
						this.tabIndex = i;
						this.data.status = this.tabs[i].param.status;
						break;
					}
				}
			}
			this.custAccId = uni.getStorageSync('custAccid');
			this.acId = uni.getStorageSync('acId');
			this.getPullRefresh();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getPullRefresh();
		},
		// 触底监听
		onReachBottom() {
			console.log('触底,判断数据余量,更新数据');
			console.log('列表分组总数:'+Math.ceil(this.count / 20),'当前列表:'+this.page.num);
			if(this.page.num < Math.ceil(this.count / 20)) {
				this.status = 'loading';
				this.page.num++;
				this.getPageList('refresh');
			}else {
				this.status = 'noMore';
				// this.$alertTost('到底了~')
			}
		},
		methods: {
			// 下拉刷新请求数据
			getPullRefresh(){
				console.clear()
				this.getPageList();
				this.getCodetype();
				this.getSelectList();
				this.sidebarInit();
			},
			
			// 初始化侧边栏数据
			async sidebarInit() {
				const sidebarLable = ['工单状态','全部类型','全部编码','全部分类'];
				const sidebarList = [this.tabs,this.typeList2,this.codeType,this.typeList];
				this.sidebarList = [];
				sidebarLable.forEach((val,index) => {
					this.sidebarList.push({
						selectEle: null,
						isShowList: false,
						title: val,
						isModelShow: index == 0 ? this.tabIndex == (this.tabs.length - 1) : true,
						data: this.handleSidebarData(sidebarList[index])
					});
				})
				console.log('侧边栏预处理数据----',this.sidebarList);
			},
			handleSidebarData(res = []) {
				let data = res;
				data.forEach(val => {
					val.ischeck = false;
					if(!val.title) {
						if(val.nameVal) {
							val.title = val.nameVal
						}
						if(val.name) {
							val.title = val.name
						}
						if(val.text) {
							val.title = val.text
						}
					}
				})
				return data
			},
			
			async getPageList(type) {
				this.status = 'loading';
				this.count = 0;
				if(type != 'refresh') {
					this.moneylist = [];
				}
				const res = await uni.$api.work.getCodeList(this.custAccId, this.acId, {
					...this.page,
					...this.data
				})
				
				this.status = 'noMore';
				if(type == 'refresh') {
					this.codelist.push(...res.data);
				}else {
					this.codelist = res.data
				}
				// 回到顶部
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 200
				});
				this.count = res.count
			},
			
			// 切换导航栏
			changeTab(item) {
				console.log(item)
				this.page.num = 1;
				this.tabIndex = item.index;
				this.data.status = item.param.status;
				this.getPageList();
			},
			
			// 获取所有类型
			async getCodetype() {
				const res = await uni.$api.code.getCodetype({
					custAccId: this.custAccId,
					type: ''
				})
				this.typeList = res.data.map((val => {
					val.ischeck = false;
					val.title = val.text
					return val;
				}));
			},
			// 获取搜索项列表
			async getSelectList() {
				this.typeList2 = [
					{ischeck: false,title: '成品',value: '成品'},
					{ischeck: false,title: '备件',value: '备件'},
					{ischeck: false,title: '全部类型',value: '全部类型'}
				],
				this.codeType = [
					{ischeck: false,title: '未锁机',value: '0'},
					{ischeck: false,title: '已锁机',value: '1'},
					{ischeck: false,title: '全部编码',value: '0'},
				]
			},
			clearSelect() {
				Object.keys(this.data).forEach(key => {
					this.data[key] = key == 'isDisable' ? 0 : '';
				})
				this.saveSelect();
			},
			// 搜索
			async goSearch(e) {
				this.data.code = e;
				this.getPageList();
			},
			
			// 复制功能
			handleCopy(index) {
				wx.setClipboardData({
					data: '防伪编码: ' + this.codelist[index].securityCode + " - 仓储编码: " + this.codelist[index].wareCode,
					success: function(res) {
						wx.showToast({
							title: '复制成功',
							icon: "none",
							mask: "true" //是否设置点击蒙版，防止点击穿透
						})
					}
				})
			},
			
			// 关闭弹窗
			closePop() {
				this.popShow = false;
			},
			// 新开弹窗
			openModel(ref) {
				if(this.$refs[ref]) {
					this.popShow = true;
					this.$refs[ref].pupshow = true;
				}
			},
			// 弹窗回调
			radioClick(item,index,isRepeat) {
				console.log(item,index,isRepeat)
				switch (index) {
					case 0:
						this.data.status = item.name
						break;
					case 1:
						this.data.type = item.value
						break;
					case 2:
						this.data.isDisable = item.value
						break;
					case 3:
						this.data.sort = item.id
						break;
				}
			},
			// 确认筛选
			saveSelect() {
				this.page.num = 1;
				this.getPageList();
				this.closePop();
			},
			
			// 打开侧边栏
			getAllSearch() {
				this.openModel('page-sidebar');
				this.sidebarInit();
			},
		}
	}
</script>

<style lang="scss">
	/deep/.u-tabs__wrapper__nav__item {
		flex: 1 !important
	}
	// 去掉默认背景色
	/deep/.u-popup__content {
		background-color: transparent !important;
	}
	// 去掉顶栏固定
	/deep/.u-navbar--fixed {
		position: static !important;
	}
	.code-content {
		height: 100vh;
		background-color: $uni-bg-color-grey;

		.tabs {
			background-color: #fff;
			font-size: 28rpx;
		}

		.u-nav-slot {
			display: flex;
			align-items: center;
		}

		.nav-status {
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 28rpx;
		}

		.card-list {
			background: $uni-bg-color-grey;
			padding: 0 20rpx;

			.card {
				padding: 28rpx 32rpx;
				background: #fff;
				border-radius: 10rpx;
				margin-bottom: 28rpx;

				.coding {
					flex-direction: column;
				
					.text-info {
						font-size: 32rpx;
						font-weight: 700;
					}
				}

				.center {
					padding-top: 10px;
					padding-bottom: 10px;
					.title {
						.title-left {
							font-size: 28rpx;
						}

						.title-right {
							// font-size: 28rpx;
						}
					}

					.text {
						font-size: 28rpx;
						color: gray;
					}
				}

				.down {
					border-top: solid 1px #f5f5f5;
					padding-top: 12px;
				}
			}
		}

		.popup {
			.popup-content {
				margin-top: 0;
				float: right;
				width: 331px;
				padding: 0 16px;
				box-sizing: border-box;
				background: #fff;
				border-top-left-radius: 10px;
				border-bottom-left-radius: 10px;
				position: relative;
				height: 100vh;
				overflow: auto;

				.top {
					line-height: 150%;
					padding-top: 13px;
					padding-bottom: 9px;
					border-bottom: solid 1px #e5e5e5;
				}

				.item-box {
					.item-title {
						padding-top: 13px;
						font-size: 13px;
						font-weight: 700;
					}

					.item {
						display: flex;
						flex-wrap: wrap;
						padding-top: 9px;
						padding-bottom: 5px;
						// justify-content: space-between;

					}
				}

				.foot {
					padding: 22px 0;
					border-top: solid 1px #e5e5e5;
					position: fixed;
					width: 288px;
					bottom: 0;
					background-color: $uni-bg-color;
				}
			}
		}

		/deep/.u-popup__content {
			border-top-left-radius: 10px;
			border-bottom-left-radius: 10px;
		}

		.u-page__tag-item {
			width: calc(33.33% - 13px);
			margin-bottom: 13px;
			margin-right: 13px;
		}

		/deep/.u-tag--medium {
			display: flex;
			justify-content: center;
			height: 66rpx;
			word-wrap: break-word;
			overflow: hidden;
			background-color: #e5e5e5;
		}
	}
</style>